<#include "/layout/layout.ftl">
<#import "/layout/macro.ftl" as macro>
<#import "/layout/select.ftl" as my/>
<#assign css>
<#--此ftl中用到的css-->
    <link rel="stylesheet" href="/assets/vendor/bootstrap-timepicker/css/bootstrap-timepicker.min.css">
    <link rel="stylesheet" href="/assets/vendor/fileinput/css/fileinput.min.css">
    <link rel="stylesheet" href="/assets/vendor/fileupload/css/jquery.fileupload.css">
    <link rel="stylesheet" href="/assets/vendor/fileupload/css/style.css">
    <style>
        .child_type {
            display: none;
        }
        /* button样式 */
        #chooseFile{
            background: #93b6fc;
        }

        #uploadFile,#rechooseFile {
            display: none;
            background: #93b6fc;
        }

        #image{
            width:200px;
            height:200px;
        }

        /* 进度条样式 */
        .bar {
            background-image: -webkit-linear-gradient(top,#5cb85c 0,#449d44 100%);
            background-image: -o-linear-gradient(top,#5cb85c 0,#449d44 100%);
            background-image: -webkit-gradient(linear,left top,left bottom,from(#5cb85c),to(#449d44));
            background-image: linear-gradient(to bottom,#5cb85c 0,#449d44 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0);
            background-repeat: repeat-x;
            height: 20px;
            line-height: 20px;
            -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
            box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
            -webkit-transition: width .6s ease;
            -o-transition: width .6s ease;
            transition: width .6s ease;
        }
        #progress {
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0);
            background-repeat: repeat-x;
            height: 20px;
            width: 0%;
            margin-bottom: 20px;
            overflow: hidden;
            background-color: #f5f5f5;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
            box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
            margin-top: 20px;
        }
    </style>
</#assign>
<#assign js>
<#--此ftl中用到的js-->
    <script src="/assets/vendor/bootstrap-timepicker/js/bootstrap-timepicker.min.js"></script>
    <script src="/assets/vendor/fileinput/js/fileinput.min.js"></script>
    <script src="/assets/vendor/fileinput/js/locales/zh.js"></script>
    <script src="/assets/vendor/fileupload/js/vendor/jquery.ui.widget.js"></script>
    <script src="/assets/vendor/fileupload/js/jquery.fileupload.js"></script>
    <#--<script src="/assets/vendor/fileupload/js/jquery.fileupload-image.js"></script>-->
    <script src="/assets/vendor/fileupload/js/jquery.fileupload-validate.js"></script>
    <#--<script src="/assets/vendor/fileupload/js/jquery.fileupload-jquery-ui.js"></script>-->
    <script src="/assets/vendor/fileupload/js/jquery.iframe-transport.js"></script>
    <script src="/assets/vendor/fileupload/js/jquery.fileupload-process.js"></script>
    <script type="text/javascript" src="/assets/vendor/bootstrap-timepicker/locales/bootstrap-timepicker.zh-CN.js"
            charset="UTF-8"></script>
    <script>
        $("#btn-submit").click(function () {
            // 校验表单合法
            var bootstrapValidator = $(".form-edit").data('bootstrapValidator');
            bootstrapValidator.validate();
            if (bootstrapValidator.isValid()) {
                $.ajax({
                    type: "POST",
                    url: "/agent/edit",
                    data: $(".form-edit").serialize(),
                    dataType: "JSON",
                    success: function (res) {
                        if (res.code == '0') {
                            layer.msg(res.message, {
                                time: 2000
                            }, function () {
                                location.href = "/agent/index";
                            });
                        } else {
                            layer.msg(res.message);
                        }
                    }
                });
            } else {
                return false;
            }
        });

        $('.form-edit').bootstrapValidator({
            message: '请输入有效值',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                proportion: {
                    validators: {
                        number: {
                            message: '请输入数字'
                        }
                    }
                }
            }
        });

        $(function () {
            //Date picker
            $('#nightS').timepicker({
                autoclose: true,
                format: "HH:mm:ss",
                showMeridian: false,
                todayHighlight: true,
                language: "zh-CN"
            });
            $('#nightE').timepicker({
                autoclose: true,
                format: "HH:mm:ss",
                showMeridian: false,
                todayHighlight: true,
                language: "zh-CN"
            });

            $("#chooseFile").on("click", function() {
                $("#head_pic_file").click();
            });

            $('#head_pic_file').fileupload({
                url: '/upload/uploadImg',//请求发送的目标地址
                Type: 'POST',//请求方式 ，可以选择POST，PUT或者PATCH,默认POST
                dataType: 'json',//服务器返回的数据类型
                autoUpload: false,
                acceptFileTypes: /(gif|jpe?g|png)$/i,//验证图片格式
                maxNumberOfFiles: 1,//最大上传文件数目
                maxFileSize: 1000000, // 文件上限1MB
                minFileSize: 100,//文件下限  100b
                messages: {//文件错误信息
                    acceptFileTypes: '文件类型不匹配',
                    maxFileSize: '文件过大',
                    minFileSize: '文件过小'
                }
            })
            //图片添加完成后触发的事件
                .on("fileuploadadd", function (e, data) {
                    //validate(data.files[0])这里也可以手动来验证文件格式和大小

                    $("#chooseFile").hide();
                    $("#uploadFile").show();
                    $("#rechooseFile").show();

                    //获取图片路径并显示
                    var url = getUrl(data.files[0]);
                    $("#image").attr("src", url);

                    //绑定开始上传事件
                    $('#uploadFile').click(function () {
                        $("#uploadFile").hide();
                        jqXHR = data.submit();
                        //解绑，防止重复执行
                        $("#uploadFile").off("click");
                    })

                    //绑定点击重选事件
                    $("#rechooseFile").click(function () {
                        $("#head_pic_file").click();
                        //解绑，防止重复执行
                        $("#rechooseFile").off("click");
                    })
                })
                //当一个单独的文件处理队列结束触发(验证文件格式和大小)
                .on("fileuploadprocessalways", function (e, data) {
                    //获取文件
                    file = data.files[0];
                    //获取错误信息
                    if (file.error) {
                        console.log(file.error);
                        $("#uploadFile").hide();
                    }
                })
                //显示上传进度条
                /*.on("fileuploadprogressall", function (e, data) {
                    $('#progress').show();
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    $('#progress').css(
                        'width', '15%'
                    );
                    $('#progress .bar').css(
                        'width', progress + '%'
                    );
                })*/
                //上传请求失败时触发的回调函数
                .on("fileuploadfail", function (e, data) {
                    layer.alert('上传失败');
                })
                //上传请求成功时触发的回调函数
                .on("fileuploaddone", function (e, data) {
                    $("#headPic").val(data.result.data);
                    console.info(data);
                    layer.alert('上传成功');
                });
        });

        //获取图片地址
        function getUrl(file) {
            var url = null;
            if (window.createObjectURL != undefined) {
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) {
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) {
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        }
    </script>
</#assign>
<@layout title="编辑" active="agent">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            <#if isAdd>
                新增
            <#else>
                编辑
            </#if>
            <small>分站详细信息</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="/"><i class="fa fa-home"></i> 管理后台</a></li>
            <li><a href="/agent/index"><i class="fa fa-list-ul"></i> 分站管理</a></li>
            <li class="active"><i class="fa fa-edit"></i>
                <#if isAdd>
                    新增
                <#else>
                    编辑
                </#if>
            </li>
        </ol>
    </section>
    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-md-12">
                <!-- Default box -->
                <div class="box  box-primary">
                    <form class="form-horizontal form-edit" method="post" action="agent/edit">
                        <div class="box-body">
                            <input type="hidden" id="id" name="id" value="${agent.id!}">
                            <input type="hidden" id="isAdd" name="isAdd" value="${isAdd?string('true','false')}">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">分站名称：</label>
                                <div class="col-sm-10">
                                    <input required placeholder="请输入区县名称" id="name" name="name" class="form-control"
                                           type="text" value="${agent.name!}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">分站联系人：</label>
                                <div class="col-sm-10">
                                    <input required placeholder="请输入分站联系人" id="contact" name="contact"
                                           class="form-control" type="text" value="${agent.contact!}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">联系人头像：</label>
                                <div class="jquery-fileupload col-sm-10" style="height: 230px">
                                    <div class="">
                                        <input id="head_pic_file" type="file" name="file" multiple
                                               style="display: none"/>
                                        <input type="button" id="chooseFile" value="+选择文件"/>
                                        <input type="button" id="uploadFile" value="~开始上传"/>
                                        <input type="button" id="rechooseFile" value="+重新选择"/>
                                    </div>
                                    <div>
                                        <img id="image" src="/${agent.headPic}">
                                    </div>
                                    <div id="progress">
                                        <div class="bar" style="width: 0%;"></div>
                                    </div>
                                </div>
                                <input type="hidden" id="headPic" name="headPic" value="${agent.headPic}">
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">联系人手机号：</label>
                                <div class="col-sm-10">
                                    <input required placeholder="请输入联系人手机号" id="phone" name="phone" class="form-control"
                                           type="text" value="${agent.phone!}">
                                    <label style="font-size: 12px;color: red">此手机号默认为分站管理员账号，默认密码：123456</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">联系地址：</label>
                                <div class="col-sm-10">
                                    <input required placeholder="请输入联系地址" id="address" name="address"
                                           class="form-control" type="text" value="${agent.address!}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">紧急联系人：</label>
                                <div class="col-sm-10">
                                    <input required placeholder="请输入紧急联系人" id="crashContact" name="crashContact"
                                           class="form-control" type="text" value="${agent.crashContact!}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">紧急联系人手机：</label>
                                <div class="col-sm-10">
                                    <input required placeholder="请输入紧急联系人手机" id="crashPhone" name="crashPhone"
                                           class="form-control" type="text" value="${agent.crashPhone!}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">抽成比例(%)：</label>
                                <div class="col-sm-10">
                                    <input required placeholder="请输入抽成比例" id="proportion" name="proportion"
                                           class="form-control" type="number" value="${agent.proportion!}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">开通状态：</label>
                                <div class="col-sm-5">
                                    <input type="radio" name="stat" value="0" class="flat-red" <#if agent.stat==0>checked</#if>>正常
                                </div>
                                <div class="col-sm-5">
                                    <input type="radio" name="stat" value="1" class="flat-red" <#if agent.stat==1>checked</#if>>暂停
                                </div>
                            </div>
                           <div class="form-group">
                                <label class="col-sm-2 control-label">外卖状态：</label>
                                <div class="col-sm-5">
                                    <input type="radio" name="takeawayStat" value="1" class="flat-red" <#if agent.takeawayStat==1>checked</#if>>开通
                                </div>
                                <div class="col-sm-5">
                                    <input type="radio" name="takeawayStat" value="0" class="flat-red" <#if agent.takeawayStat==0>checked</#if>>关闭
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">银行卡开户行：</label>
                                <div class="col-sm-5">
                                    <input required placeholder="请输入银行卡开户行" id="bankName" name="bankName"
                                           class="form-control" type="text" value="${agent.bankName!}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">卡号：</label>
                                <div class="col-sm-5">
                                    <input required placeholder="请输入卡号" id="bankCard" name="bankCard"
                                           class="form-control" type="text" value="${agent.bankCard!}">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">开户人姓名：</label>
                                <div class="col-sm-5">
                                    <input required placeholder="请输入开户人姓名" id="cardName" name="cardName"
                                           class="form-control" type="text" value="${agent.cardName!}">
                                </div>
                            </div>
                            <div class="box-footer">
                                <button type="button" class="btn btn-default btn-back">返回</button>
                                <button type="button" class="btn btn-info pull-right btn-submit" id="btn-submit">提交</button>
                            </div>

                    </form>
                </div>
                <!-- /.box -->
            </div>
        </div>
    </section>
    <!-- /.content -->
</@layout>
